<template>
  <div>
    <div>
      <el-dialog title="添加学生" :visible.sync="dialogAddVisible" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="addForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="Sex">
            <el-select v-model="addForm.Sex">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="Phone">
            <el-input v-model="addForm.Phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Email">
            <el-input v-model="addForm.Email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="专业班级" prop="Class">
            <el-input v-model="addForm.Class" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公寓宿舍" prop="Apartment">
            <el-input v-model="addForm.Apartment" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="Note">
            <el-input v-model="addForm.Note" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="Sno">
            <el-input v-model="addForm.Sno" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="Type">
            <el-select v-model="addForm.Type">
              <el-option label="普通用户" :value="2"></el-option>
              <el-option label="管理员" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleAddCancel">取 消</el-button>
          <el-button type="primary" @click="handleAddConfirm">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="dialogDeleteVisible" :close-on-click-modal="false">
        <span>是否删除该学生</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleDeleteCancel">取 消</el-button>
          <el-button type="primary" @click="handleDeleteConfirm">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑学生" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
        <el-form ref="editForm" :model="editForm" :rules="rules">
          <el-form-item label="姓名" prop="Name">
            <el-input v-model="editForm.Name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="Sex">
            <el-select v-model="editForm.Sex">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="Phone">
            <el-input v-model="editForm.Phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Email">
            <el-input v-model="editForm.Email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="专业班级" prop="Class">
            <el-input v-model="editForm.Class" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公寓宿舍" prop="Apartment">
            <el-input v-model="editForm.Apartment" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="Sno">
            <el-input v-model="editForm.Sno" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="Type">
            <el-select v-model="editForm.Type">
              <el-option label="普通用户" :value="2"></el-option>
              <el-option label="管理员" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="handleEditCancel">取 消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    
    <wrap :is-form="true">
      <el-form ref="searchForm" :inline="true" :model="searhForm" :rules="searchRules">
        <el-form-item label="学生姓名" prop="Name">
          <el-input v-model="searhForm.Name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="专业班级" prop="Class">
          <el-input v-model="searhForm.Class" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="公寓宿舍" prop="Apartment">
          <el-input v-model="searhForm.Apartment" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </wrap>

    <wrap v-loading="tableLoading">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="handleAddOpen">添加学生</el-button>
      <el-table
        :data="tableDataPart"
        style="width: 100%">
        <el-table-column
          prop="Name"
          width="90px"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="Org_name.String"
          label="学校">
        </el-table-column>
        <el-table-column
          prop="Sex"
          width="50px"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="Phone"
          label="手机号码">
        </el-table-column>
        <el-table-column
          prop="Email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="Class"
          label="班级">
        </el-table-column>
        <el-table-column
          prop="Apartment"
          label="宿舍">
        </el-table-column>
        <el-table-column
          prop="Avatar"
          label="头像">
        </el-table-column>
        <el-table-column
          prop="Note"
          label="简介">
        </el-table-column>
        <el-table-column
          prop="Credit"
          width="50px"
          label="学分">
        </el-table-column>
        <el-table-column
          prop="Points"
          width="50px"
          label="积分">
        </el-table-column>
        <el-table-column
          prop="Peract_repu"
          width="50px"
          label="个人打卡信誉">
        </el-table-column>
        <el-table-column
          prop="Triact_repu"
          width="50px"
          label="部落打卡信誉">
        </el-table-column>
        <el-table-column
          prop="Sno"
          label="学号">
        </el-table-column>
        <el-table-column
          width="70px"
          label="类型">
          <template slot-scope="scope">
            {{ parseInt(scope.row.Type) === 2 ? '普通用户' : '管理员' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="Create_time"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="Update_time"
          label="更新时间">
        </el-table-column>
        <el-table-column
          width="200"
          label="操作">
          <template v-slot="scope">
            <el-button
              size="small"
              plain
              type="primary"
              icon="el-icon-edit-outline"
              @click="handleEditOpen(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="small"
              type="danger"
              plain
              icon="el-icon-delete"
              @click="handleDeleteOpen(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </wrap>
  </div>  
</template>

<script>
import Wrap from '@/components/Wrap'
import { deepClone } from '@/utils/index'
import { studentGet, studentAdd, studentDelete, studentEdit } from '@/api/student'
import store from '@/store'
export default {
  components: {
    Wrap
  },
  data() {
    return {
      dialogAddVisible: false,
      dialogEditVisible: false,
      dialogDeleteVisible: false,
      editIndex: 0,
      deleteIndex: 0,
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      tableDataCopy: [],
      orgData: [],
      tableLoading: true,
      rules: {
        Name: [
          { required: true, message: '请输入姓名' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Sex: [
          { required: true, message: '请选择性别' }
        ],
        Phone: [
          { required: true, message: '请输入手机号码' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '请输入合法手机号码' }
        ],
        Email: [
          {  required: true, message: '请输入邮箱' },
          {  type: 'email', message: '请输入合法邮箱' }
        ],
        Class: [
          {  required: true, message: '请输入专业班级' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符' }      
        ],
        Apartment: [
          {  required: true, message: '请输入公寓宿舍' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符' }      
        ],           
        Note: [
          { required: true, message: '请输入简介' }
        ],        
        Sno: [
          { required: true, message: '请输入学号' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
        ],
        Type: [
          { required: true, message: '请选择类型' }          
        ],
      },
      searchRules: {
        Name: [
          { min: 1, max: 20, message: '长度在 20 个字符以内' }
        ],
        Class: [
          { min: 1, max: 40, message: '长度在 40 个字符以内' }      
        ],
        Apartment: [
          { min: 1, max: 40, message: '长度在 40 个字符以内' }      
        ], 
      },
      addForm: {
        Name: '',
        Org_id: store.getters.org_id,
        Sex: '',
        Phone: '',
        Email: '',
        Class: '',
        Apartment: '',
        Avatar: '暂无',
        Note: '暂无',
        Sno: '',
        Type: 2
      },
      editForm: {
        Id: '',
        Name: '',
        Sex: '',
        Phone: '',
        Email: '',
        Class: '',
        Apartment: '',
        Avatar: '暂无',
        Note: '暂无',
        Sno: '',
        Type: 2
      },
      searhForm: {
        Name: '',
        Class: '',
        Apartment: ''
      }
    }
  },
  computed: {
    tableDataPart() {
      return this.tableData.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
    }
  },
  mounted() {
    studentGet().then(res => {
      this.tableData = res.data
      this.tableDataCopy = deepClone(res.data)
      this.tableLoading = false
    }).catch(err => {
      this.tableLoading = false
    })
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleAddOpen() {
      this.dialogAddVisible = true
    },
    handleEditOpen(index, row) {
      this.editIndex = index
      this.editForm = deepClone(this.tableData[index])
      this.dialogEditVisible = true
    },
    handleDeleteOpen(index, row) {
      this.deleteIndex = index
      this.dialogDeleteVisible = true
    },
    handleAddConfirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          studentAdd(this.addForm).then(res => {
            this.tableData.unshift(res.data)
            this.dialogAddVisible = false
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleAddCancel() {
      this.dialogAddVisible = false
    },
    handleDeleteConfirm() {
      this.tableLoading = true
      studentDelete({
        id: this.tableData[this.deleteIndex].Id
      }).then(res => {
        this.tableData.splice(this.deleteIndex, 1)
        this.dialogDeleteVisible = false
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    handleDeleteCancel() {
      this.dialogDeleteVisible = false
    },
    handleEditConfirm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          studentEdit(this.editForm).then(res => {
            this.$set(this.tableData, this.editIndex, res.data)
            this.dialogEditVisible = false
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          })
        }
      })
    },
    handleEditCancel() {
      this.dialogEditVisible = false
    },
    handleSearch() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          this.tableLoading = true
          studentGet(this.searhForm).then(res => {
            this.tableData = res.data
            this.tableDataCopy = deepClone(res.data)
            this.tableLoading = false
          }).catch(err => {
            this.tableLoading = false
          }) 
        }
      })
    },
    handleReset() {
      this.tableLoading = true
      this.searhForm.Name = ''
      this.searhForm.Class = ''
      this.searhForm.Apartment = ''
      studentGet().then(res => {
        this.tableData = res.data
        this.tableDataCopy = deepClone(res.data)
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
      })        
    }
  }
}
</script>

<style scoped>

</style>
